<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<h1>流式布局</h1>
<div style="background-color: darkorchid; width:20%;height:50px">这是我的第一个div</div>
<div style="background-color: darkred; width:20%;height:50px">这是我的第二个div</div>
<div style="background-color: green; width:20%;height:50px">这是我的第三个div</div>
<h1>左右布局</h1>
<div style="float :left">
    <div style="background-color: darkorchid; width:20%;height:50px;float: inherit">这是我的第一个div</div>
    <div style="background-color: darkred; width:20%;height:50px;float: left">这是我的第二个div</div>
</div>
<h1>厂式布局</h1>
<div style="background-color: darkred;width: 80%;height: 50px"></div>
<div style = "background-color: blue;width: 20%;height: 100px;float: left"></div>
<div style = "background-color: red;width: 60%;height: -->100px;float: left"></div>
<h1>工式布局</h1>
<div style="background-color: darkred;width: 80%;height: 50px"></div>
<div style = "background-color: blue;width: 20%;height: 100px;float: left"></div>
<div style = "background-color: red;width: 60%;height: 100px;float: left"></div>
<div style="background-color: darkred;width: 80%;height: 50px; clear: both"></div>
</body>
</html>